<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="m/head :: head"></div>

    <style>
        .mypai {
            display: none;
        }
    </style>
</head>

<body class="body-gray">

<div th:replace="m/head :: body('banner.hidden', 'head-no-menu', '订单支付')"></div>


<!--主体内容-->
<div class="payment-content">
    <!--订单信息-->
    <div class="payment-box">
        <h3>订单信息</h3>
        <div class="con">
            <ul>
                <li>
                    <div class="left">作品名称</div>
                    <div class="right" th:text="${orderDetail.sameStyleId eq null ? '私人定制作品' : orderDetail.sameStyle.name + ' - 同款作品'}"></div>
                </li>
                <li>
                    <div class="left">买家昵称</div>
                    <div class="right" th:text="${orderUser.nickname}"></div>
                </li>
                <li>
                    <div class="left">交易金额</div>
                    <div class="right" th:text="${'￥' + #numbers.formatDecimal(order.totalPrice,1,2) + '元'}"></div>
                </li>
                <li>
                    <div class="left">购买时间</div>
                    <div class="right" th:text="${#dates.format(order.orderTime,'yyyy-MM-dd HH:mm')}"></div>
                </li>
                <li>
                    <div class="left">订单编号</div>
                    <div class="right" th:text="${order.no}"></div>
                </li>
            </ul>
        </div>
    </div>
    <!--付款方式-->
    <div class="payment-box private-payment">
        <h3>付款方式</h3>

        <div class="con">
            <!--/* 如果订单作品类型为宣传片, 并且为待付款-未评估价格状态, 不显示支付方式 */-->
            <ul th:if="${not ((order.type eq 2 or order.orderDetail.videoType eq 4) and order.status eq 2 and order.statusStep eq 1)}">
                <li>
                    <div class="left">
                        <img th:src="@{/static/m/img/icon/zfb-icon.png}"/>
                        支付宝支付
                    </div>
                    <div class="right"><i class="on"></i></div>
                </li>
                <li>
                    <div class="left">
                        <img th:src="@{/static/m/img/icon/wx-fk-icon.png}"/>
                        微信支付
                    </div>
                    <div class="right"><i></i></div>
                </li>
            </ul>
            <!--/* 如果订单作品类型为宣传片, 并且为待付款-未评估价格状态, 提示 */-->
            <ul th:if="${(order.type eq 2 or order.orderDetail.videoType eq 4) and order.status eq 2 and order.statusStep eq 1}">
                <li>
                    <div style="font-size: 12px; color: red;">订单已创建, 小鹿稍候会为您评估总价, 请稍候再进行支付</div>
                </li>
            </ul>
        </div>
    </div>
</div>

<!--/* 如果订单作品类型为宣传片, 并且为待付款-未评估价格状态, 不显示支付方式 */-->
<form id="paymentForm" th:action="@{/order/pay}" method="post" th:if="${not ((order.type eq 2 or order.orderDetail.videoType eq 4) and order.status eq 2 and order.statusStep eq 1)}">
    <input type="hidden" id="id" name="id" th:value="${order.id}"/>
    <input type="hidden" name="type" value="1"/>
</form>

<!--/* 如果订单作品类型为宣传片, 并且为待付款-未评估价格状态, 不显示支付方式 */-->
<div class="private-bottom-nav identical-bottom-nav clearfix" th:if="${not ((order.type eq 2 or order.orderDetail.videoType eq 4) and order.status eq 2 and order.statusStep eq 1)}">
    <div class="right">
        <p th:text="${'应付金额：￥' + #numbers.formatDecimal(order.totalPrice,1,2) + '元'}"></p>
        <a href="javascript:;" onclick="window.paymentForm.submit();">确认付款</a>
    </div>
</div>

<div th:replace="m/foot :: body"></div>

</body>

<div th:replace="m/foot :: footer('baidu.hide')"></div>

<script>
    $(function () {
        // 私人定制付款
        $('.private-payment ul li i').click(function () {
            $(this).addClass('on').parent().parent().siblings().find('i').removeClass('on');
            $('input[name="type"]').val($(this).parent().index() + 1);
        });

        /**
         * 检查订单是否支付成功
         */
        setInterval(function () {
            $.ajax({
                type: 'post',
                url: '/order/review/' + [[${order.no}]],
                data: {
                    orderNo: [[${order.no}]],
                    type: [[${order.type}]]
                },
                dataType: 'json',
                beforeSend: function (xhr) {
                    xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
                },
                success: function (result) {
                    if (result.status == Messages.HTTP_STATUS.SUCCESS && result.data == true) {
                        window.location.href = '/order/get/' + [[${orderId}]];
                    } else {

                    }
                }
            });
        }, 3000);
    })
</script>

</html>
